<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart-wrapper"></div>
    <div class="grid">
      <div v-for="i in valuesArr" :key="i">
        {{ i }}
      </div>
    </div>
    <div class="test">
      <div v-for="i in valuesArr" :key="i">
        {{ i }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;
const totalPoints = 48; 
const pointWidth = 40; 

const generateMockData = () => {
  const times = [];
  const values = [];
  for (let i = 0; i < totalPoints; i++) {
    times.push(i);
    const baseTemp = 26;
    const dayNightFactor = Math.sin((i - 6) / 6 * Math.PI) * 4; 
    values.push(parseFloat((baseTemp + dayNightFactor).toFixed(1)));
  }
  return { times, values };
};

const setChartWidth = () => {
  if (chartRef.value) {
    const totalWidth = totalPoints * pointWidth;
    chartRef.value.style.width = `${totalWidth}px`;
  }
};
const valuesArr = ref([]);

const initChart = () => {
  if (!chartRef.value) { return; }
  
  setChartWidth();
  
  if (chartInstance) {
    chartInstance.dispose();
  }
  
  chartInstance = echarts.init(chartRef.value);
  const { times, values } = generateMockData();
  valuesArr.value = values;
  
  const lineColor = '#3b82f6';
  const fillOpacity = 0.7;
  const opacityHex = Math.round(fillOpacity * 255)
    .toString(16)
    .padStart(2, '0');
  
  const option = {
    tooltip: { show: false },
    silent: true, 
    xAxis: {
      type: 'category',
      data: times,
      show: false,
      boundaryGap: false,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      interval: 0,
    },
    yAxis: {
      type: 'value',
      show: false,
      min: Math.min(...values) - 2,
      max: Math.max(...values) + 1,
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      padding: [0, 0, 0, 0],
      containLabel: false,
    },
    animation: false,
    series: [
      {
        type: 'line',
        data: values,
        smooth: true,
        showSymbol: false,
        lineStyle: { width: 0 },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: `${lineColor}${opacityHex}` },
              { offset: 1, color: `${lineColor}00` },
            ],
          },
        },
        z: 1,
      },
    //   {
    //     type: 'scatter',
    //     data: values.map((val, idx) => {
    //       // 关键：每个标注的X坐标设为“idx + 0.5”（格子中心位置）
    //       const xPos = idx; 
    //       return { value: [xPos, Math.min(...values) + 2, val], symbolSize: 0 };
    //     }),
    //     label: {
    //       show: true,
    //       position: 'center',
    //       formatter: (params) => `${params.data.value[2].toFixed(1)}`,
    //       fontSize: 14,
    //       fontFamily: 'MiSans',
    //       color: '#000',
    //       rotate: 0,
    //       overflow: 'none',
    //       hideOverlap: false,
    //     },
    //     z: 3,
    //   },
    ],
  };
  
  chartInstance.setOption(option);
};

const handleResize = () => {
  setChartWidth();
  if (chartInstance) {
    chartInstance.resize();
  }
};

onMounted(() => {
  nextTick(() => {
    initChart();
    window.addEventListener('resize', handleResize);
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped lang="less">
.chart-container {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  box-shadow: none;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  position: relative;
}

.chart-wrapper {
  height: 48px;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}

.grid {
  display: flex;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0;
  position: absolute;
  bottom: -6px;
  
  div {
    width: 40px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    
    // &:nth-child(even) {
    //   background: red;
    // }
    // &:nth-child(odd) {
    //   background: blue;
    // }
  }
}

.test {
  display: flex;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0;
  margin-top: 60px;
  
  div {
    width: 40px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    
    // &:nth-child(even) {
    //   background: red;
    // }
    // &:nth-child(odd) {
    //   background: blue;
    // }
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
</style>